{include file="/common/scripts" /}

<style>
    .goods-form .el-header {
        --el-header-padding: 10px 20px 0;
        --el-header-height: fit-content;
    }

    .goods-form .el-header .el-tabs__header {
        margin: 0;
    }

    .goods-form .goods-type {
        width: 140px;
        height: 56px;
        border: 1px solid rgb(230, 230, 230);
        border-radius: 4px;
        margin-left: 16px;
        cursor: pointer;
    }

    .goods-form .goods-type.is-active {
        border: 1px solid var(--el-color-primary);
    }

    .goods-form .title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding-left: 16px;
        background: var(--sa-table-striped);
        margin: 24px 0 16px;
        font-weight: 500;
        font-size: 14px;
        color: #434343;
    }

    .goods-form .sku-wrap {
        width: 100%;
        border: 1px solid #d9d9d9;
        padding: 8px;
        box-sizing: border-box;
    }

    .goods-form .sku-wrap .sku {
        width: 100%;
        min-height: 100px;
    }

    .goods-form .sku-wrap .sku .sku-key {
        width: 100%;
        height: 40px;
        color: var(--sa-subtitle);
        padding: 0 16px;
        background: var(--sa-table-header-bg);
        font-size: 14px;
    }

    .goods-form .sku-wrap .sku .sku-key .sku-value-title {
        margin-right: 16px;
    }

    .goods-form .sku-wrap .sku .sku-key .sku-key-input {
        width: 120px;
    }

    .goods-form .sku-wrap .sku .sku-key .sku-key-icon {
        color: var(--el-color-primary);
        cursor: pointer;
    }

    .goods-form .sku-wrap .sku .sku-value {
        padding: 12px 0 0 30px;
        font-size: 14px;
        color: var(--sa-subtitle);
    }

    .goods-form .sku-wrap .sku .sku-value .sku-value-title {
        height: 32px;
        margin-right: 16px;
        margin-bottom: 16px;
    }

    .goods-form .sku-wrap .sku .sku-value .sku-value-box {
        position: relative;
        margin-right: 24px;
        margin-bottom: 16px;
    }

    .goods-form .sku-wrap .sku .sku-value .sku-value-box .sku-value-input {
        width: 104px;
    }

    .goods-form .sku-wrap .sku .sku-value .sku-value-box .sku-value-icon {
        position: absolute;
        right: -8px;
        top: -8px;
        width: 16px;
        height: 16px;
        color: var(--el-color-primary);
    }

    .goods-form .sku-wrap .sku .sku-value .sku-value-add {
        margin-right: 24px;
        margin-bottom: 16px;
    }

    .goods-form .sku-wrap .sku-tools {
        width: 100%;
        height: 40px;
        color: #434343;
        padding-left: 16px;
        background: var(--sa-table-header-bg);
        font-size: 12px;
    }

    .goods-form .sku-table-wrap {
        width: 100%;
        overflow: auto;
        margin-top: 16px;
    }

    .goods-form .sku-table-wrap .sku-table {
        width: 100%;
        border: 1px solid var(--sa-border);
    }

    .goods-form .sku-table-wrap .sku-table tbody {
        font-size: 12px;
    }

    .goods-form .sku-table-wrap .sku-table th {
        font-size: 12px;
        color: var(--subtitle);
        height: 32px;
        line-height: 1;
        padding-left: 12px;
        box-sizing: border-box;
        text-align: left;
    }

    .goods-form .sku-table-wrap .sku-table th .sku-table-header-title {
        margin-right: 10px;
    }

    .goods-form .sku-table-wrap .sku-table th .th-title {
        font-size: 12px;
        color: var(--subtitle);
        font-weight: bold;
    }

    .goods-form .sku-table-wrap .sku-table td {
        min-width: 88px;
        padding: 0 10px;
        height: 40px;
        box-sizing: border-box;
    }

    .goods-form .sku-table-wrap .sku-table td.image {
        min-width: 48px;
    }

    .goods-form .sku-table-wrap .sku-table td.stock {
        min-width: 138px;
    }

    .goods-form .sku-table-wrap .sku-table td.stock_warning {
        min-width: 168px;
    }

    .goods-form .sku-table-wrap .sku-table td.stock_warning .sku-stock-switch {
        margin-right: 10px;
    }

    .goods-form .sku-table-wrap .sku-table td.sn {
        min-width: 116px;
    }

    .goods-form .batch-icon {
        font-size: 12px;
        color: var(--el-color-primary);
        margin-left: 8px;
        cursor: pointer;
    }

    .sales-show-type .exact,
    .sales-show-type .sketchy {
        width: 220px;
        height: 98px;
    }

    .stock-show-type .exact,
    .stock-show-type .sketchy {
        width: 220px;
        height: 74px;
    }

    .goods-form .el-select {
        flex: 1;
    }

    .goods-form .category-tag-wrap {
        flex: 1;
        min-height: 32px;
        padding-right: 12px;
        border-radius: 4px;
        border: 1px solid var(--sa-border);
        cursor: pointer;
        position: relative;
    }

    .goods-form .category-tag-wrap .el-tag {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        margin: 2px 0 2px 6px;
        text-overflow: ellipsis;
    }

    .goods-form .category-tag-wrap-suffix {
        width: 12px;
        height: 100%;
        position: absolute;
        right: 6px;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .goods-form .category-tag-wrap-suffix .circle-close {
        display: none;
    }

    .goods-form .category-tag-wrap-suffix.is-active:hover .circle-close {
        display: block;
    }

    .goods-form .category-tag-wrap-suffix.is-active:hover .arrow-down {
        display: none;
    }

    .category-tooltip {}

    .goods-form .is-error {
        color: #FF4D4F;
    }
    .goods-form .el-affix, .goods-form .el-tabs{
        width: 100%;
        background: #fff;
    }

    .editor-form-item .el-form-item__content {
        margin-left: 16px !important;
    }

    .note-editable {
        height: 300px !important;
    }
</style>

<div id="addEdit" class="goods-form" v-cloak>
    <el-container class="panel-block">
        <el-header>
            <el-tabs v-model="state.activeStep" @tab-click="isValidate">
                <el-tab-pane :name="0">
                    <template #label>
                        <div class="sa-flex" :class="validateData['0']?'is-error':''">
                            基本信息
                            <el-icon v-if="validateData['0']" class="ml-1">
                                <warning-filled />
                            </el-icon>
                        </div>
                    </template>
                </el-tab-pane>
                <el-tab-pane :name="1">
                    <template #label>
                        <div class="sa-flex" :class="validateData['1']?'is-error':''">
                            价格/库存
                            <el-icon v-if="validateData['1']" class="ml-1">
                                <warning-filled />
                            </el-icon>
                        </div>
                    </template>
                </el-tab-pane>
                <el-tab-pane :name="2">
                    <template #label>
                        <div class="sa-flex" :class="validateData['2']?'is-error':''">
                            商品详情
                            <el-icon v-if="validateData['2']" class="ml-1">
                                <warning-filled />
                            </el-icon>
                        </div>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </el-header>
        <el-main>
            <el-scrollbar height="100%">
                <el-form :model="form.model" :rules="form.rules" ref="formRef0" label-width="100px">
                    <div v-show="state.activeStep==0">

                        <el-form-item label="商品标题" prop="title">
                            <el-input class="sa-w-360" v-model="form.model.title" placeholder="请输入商品标题"></el-input>
                        </el-form-item>

                        <el-form-item label="简介(认证范畴)">
<!--                            <el-input class="sa-w-360" v-model="form.model.goods_desc" placeholder="请输入认证范畴"></el-input>-->
                            <textarea  v-model="form.model.goods_desc" class="goods_desc"></textarea>
                        </el-form-item>
                        <el-form-item label="商品主图" prop="image">
                            <sa-uploader v-model="form.model.image" type="size" @success="onSuccess"></sa-uploader>
                            <div class="warning"> 作用于商城列表、分享图片；建议尺寸：750*750 px </div>
                        </el-form-item>
                        <el-form-item label="轮播图" prop="images">
                            <sa-uploader v-model="form.model.images" :multiple="true"></sa-uploader>
                            <div class="warning">
                                作用于商品详情顶部轮播显示，<br />轮播图可以拖拽调整顺序
                            </div>
                        </el-form-item>
                        <el-form-item label="商品分类">
                            <div class="sa-w-360" style="width: 100%">
                                <el-popover popper-class="category-tooltip sa-popper" effect="light"
                                            placement="top-start" trigger="click" width="800">
                                    <el-tabs v-model="tempCategory.tabActive"  :tab-position="tabPosition">
                                        <el-tab-pane v-for="tab in category.select" :key="tab" :label="tab.name"
                                                     :name="tab.id + ''">
                                            <el-cascader-panel v-model="tempCategory.idsArr[tab.id]"
                                                               :ref="(el) => setCategoryRef(el, tab)" :options="tab.children" :props="{
                                                        multiple: true,
                                                        checkStrictly: true,
                                                        value: 'id',
                                                        label: 'name',
                                                        children: 'children',
                                                        emitPath: false,
                                                    }" @change="onChangeCategoryIds"></el-cascader-panel>
                                        </el-tab-pane>
                                    </el-tabs>
                                    <template #reference>
                                        <div class="category-tag-wrap">
                                            <el-tag v-for="(value, key) in tempCategory.label" :key="key" type="info"
                                                    closable @close.stop="onDeleteCategoryIds(key)">{{ value }}</el-tag>
                                            <div class="category-tag-wrap-suffix"
                                                 :class="JSON.stringify(tempCategory.label) == '{}'?'':'is-active'">
                                                <el-icon class="arrow-down">
                                                    <arrow-down />
                                                </el-icon>
                                                <el-icon class="circle-close" @click.stop="onClearCategoryIds">
                                                    <circle-close />
                                                </el-icon>
                                            </div>
                                        </div>
                                    </template>
                                </el-popover>

                            </div>
                        </el-form-item>

                        <el-form-item label="商品排序">
                            <el-input class="sa-w-360" v-model="form.model.weigh" placeholder="请输入商品排序" type="number"
                                :min="0">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="首页热门">
                            <el-radio-group v-model="form.model.is_hot">
                                <el-radio :label="0">不是</el-radio>
                                <el-radio :label="1">是</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="商品状态">
                            <el-radio-group v-model="form.model.status">
                                <el-radio label="up">上架</el-radio>
                                <el-radio label="hidden">隐藏</el-radio>
                                <el-radio label="down">下架</el-radio>
                            </el-radio-group>
                        </el-form-item>

                    </div>
                </el-form>
                <el-form :model="form.model" :rules="form.rules" ref="formRef1" label-width="100px">
                    <div v-show="state.activeStep==1">
                        <el-form-item label="商品价格">
                            <el-input class="sa-w-360" v-model="form.model.price" placeholder="请输入商品价格" type="number"
                                      :min="0">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="虚拟销售量">
                            <el-input class="sa-w-360" v-model="form.model.virtually_nums" placeholder="请输入虚拟销售量" type="number"
                                      :min="0">
                            </el-input>
                        </el-form-item>
                    </div>
                </el-form>
                <el-form :model="form.model" :rules="form.rules" ref="formRef2" label-width="100px">
                    <div v-show="state.activeStep==2">
                        <el-form-item class="editor-form-item" label="">
                            <form role="form">
                                <textarea id="goodsContent" class="editor"></textarea>
                            </form>
                        </el-form-item>
                    </div>
                </el-form>
            </el-scrollbar>
        </el-main>
        <el-footer class="sa-footer--submit sa-flex sa-row-right">
            <!-- <el-button plain v-if="state.activeStep > 0" @click="onBack">上一步</el-button>
            <el-button v-if="state.activeStep < 4" type="primary" @click="onNext">下一步</el-button> -->
            <el-button type="primary" @click="onConfirm">确定</el-button>
        </el-footer>
    </el-container>
</div>
